import React, { Component } from 'react'
import {
	StyleSheet,
	Image,
	View,
	Text,
	TouchableOpacity,
	ImageBackground
} from 'react-native'
import { Actions } from 'react-native-router-flux'
import Iconfont from '../iconfont'
import commonStyle from '../../libs/commonStyle'
import { connect } from 'react-redux' // 引入connect函数
import * as userAction from '../../redux/actions/user'
class User extends Component {
	_onEdit() {
		Actions.information(this.props.user)
	}
	componentDidMount() {
		this.props.getUserInfo && this.props.getUserInfo()
	}
	render() {
		const user = this.props.userinfo || {}
		return (
			<ImageBackground
				resizeMode="cover"
				style={[
					commonStyle.wp100,
					commonStyle.h250,
					commonStyle.flexCenter
				]}
// 				source={{
// 					uri:
// 						'https://ojlty2hua.qnssl.com/image-1552706059446-6aaW6aG15Liq5Lq65L-h5oGv5Yy65Z-f6IOM5pmvLmpwZw==.jpg'
// 				}}
				source={require('../../../assets/imgs/user-bg.jpg')}
			>
				<TouchableOpacity
					activeOpacity={1}
					onPress={this._onEdit.bind(this)}
					style={[
						styles.wrapper,
						commonStyle.p20,
						// commonStyle.pt40,
						// commonStyle.pb40,
						commonStyle.flexVerticalCenter,
						commonStyle.flexRow
					]}
				>
					<Image
						style={[styles.img]}
						source={{
							uri: user.headimgurl
						}}
					/>
					<View style={[commonStyle.pl20, commonStyle.flexItem]}>
						<Text style={[commonStyle.colorWhite]}>
							ID：{user.userId}
						</Text>
						<Text
							style={[commonStyle.pt10, commonStyle.colorWhite]}
						>
							师傅ID：{user.parentId || '未绑定'}
						</Text>
						<Text
							style={[commonStyle.pt10, commonStyle.colorWhite]}
						>
							手机号：{user.mobile || '未绑定'}
						</Text>
					</View>
					<Iconfont
						name="right_line"
						style={[
							commonStyle.f40,
							commonStyle.fontBold,
							commonStyle.colorWhite,
							commonStyle.w100,
							commonStyle.textRight
						]}
					/>
				</TouchableOpacity>
			</ImageBackground>
		)
	}
}

const styles = StyleSheet.create({
	wrapper: {
		// backgroundColor: '#C30D23'
	},
	item: {
		flexDirection: 'row',
		paddingBottom: 10,
		borderBottomWidth: 1,
		borderStyle: 'solid',
		borderBottomColor: '#f5f5f5',
		marginBottom: 20
	},
	img: {
		width: 50,
		height: 50,
		borderRadius: 25,
		borderWidth: 1,
		borderColor: '#fefefe'
	},
	colorWhite: {
		color: '#fff'
	},
	border: {
		borderBottomWidth: 1,
		// borderStyle: 'solid',
		borderBottomColor: '#f5f5f5'
	}
})

export default connect(
	state => ({
		userinfo: state.user.user
	}),
	dispatch => ({
		getUserInfo: () => dispatch(userAction.userInfo())
	})
)(User)
